<script setup lang="ts">
  import { ref, onMounted, computed, onUnmounted, watch } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import type { Tag, Blog, BlogPageParam } from '@/types/api'
  import { list as getTagList } from '@/api/tag'
  import { page as getBlogPage } from '@/api/blog'

  const route = useRoute()
  const router = useRouter()

  const loading = ref(true)
  const blogsLoading = ref(false)
  const tag = ref<Tag | null>(null)
  const blogs = ref<Blog[]>([])
  const relatedTags = ref<Tag[]>([])
  const notFound = ref(false)

  // 搜索和排序
  const searchKeyword = ref('')
  const sortType = ref<number>(-1) // -1: 时间倒序, 1: 时间正序, -2: 阅读倒序, 2: 阅读正序
  const showSortDropdown = ref(false)
  const searchTimer = ref<number | null>(null)

  // 分页信息
  const pagination = ref({
    current: 1,
    pageSize: 12,
    total: 0,
  })

  // 排序选项
  const sortOptions = [
    { value: -1, label: '最新发布', icon: '🆕' },
    { value: 1, label: '最早发布', icon: '⏰' },
    { value: -2, label: '最多阅读', icon: '👁️' },
    { value: 2, label: '最少阅读', icon: '📖' },
  ]

  // 预定义的标签颜色
  const tagColors: { [key: string]: string } = {
    'Vue.js': '#4FC08D',
    Vue: '#4FC08D',
    JavaScript: '#F7DF1E',
    TypeScript: '#3178C6',
    React: '#61DAFB',
    CSS: '#1572B6',
    'Node.js': '#339933',
    Webpack: '#8DD6F9',
    前端工程化: '#FF6B6B',
    HTML: '#E34C26',
    Java: '#007396',
    Spring: '#6DB33F',
    Python: '#3776AB',
    Git: '#F05032',
    Docker: '#2496ED',
    MySQL: '#4479A1',
    Redis: '#DC382D',
    Linux: '#FCC624',
    Nginx: '#009639',
  }

  // 获取标签图标
  const getTagIcon = (tagInput: Tag | string) => {
    if (typeof tagInput === 'string') {
      // 兼容旧的调用方式，查找对应的标签对象
      const foundTag =
        relatedTags.value.find(t => t.name === tagInput) ||
        (tag.value && tag.value.name === tagInput ? tag.value : null)
      return foundTag?.icon || '🏷️'
    }
    return tagInput.icon || '🏷️'
  }

  // 统计信息
  const stats = computed(() => {
    if (!tag.value) return null

    const totalViews = blogs.value.reduce((sum, blog) => sum + (blog.views || 0), 0)
    const totalLikes = blogs.value.reduce((sum, blog) => sum + (blog.likes || 0), 0)
    const avgViews = blogs.value.length > 0 ? Math.round(totalViews / blogs.value.length) : 0

    return {
      totalArticles: searchKeyword.value ? pagination.value.total : tag.value.count || 0,
      totalViews,
      totalLikes,
      avgViews,
    }
  })

  // 切换排序下拉菜单
  const toggleSortDropdown = () => {
    showSortDropdown.value = !showSortDropdown.value
  }

  // 处理排序选择
  const handleSortSelect = (sort: number) => {
    sortType.value = sort
    pagination.value.current = 1
    loadTagBlogs()
    toggleSortDropdown()
  }

  // 获取排序文本
  const getSortText = () => {
    const option = sortOptions.find(opt => opt.value === sortType.value)
    return option?.label || '排序'
  }

  // 点击外部关闭下拉菜单
  const handleClickOutside = (event: Event) => {
    const target = event.target as HTMLElement
    if (!target.closest('.sort-dropdown')) {
      showSortDropdown.value = false
    }
  }

  // 加载标签数据
  const loadTagData = async () => {
    try {
      const tagId = route.params.id as string
      console.log('🔍 正在查找标签ID:', tagId)

      const response = await getTagList()
      console.log('📋 获取到的标签列表:', response)

      if (response && response.length > 0) {
        console.log('🏷️ 标签ID类型对比:', {
          searchId: tagId,
          searchIdType: typeof tagId,
          firstTagId: response[0].id,
          firstTagIdType: typeof response[0].id,
        })
      }

      const foundTag = response?.find(t => t.id === tagId || t.id.toString() === tagId)
      console.log('🎯 找到的标签:', foundTag)

      if (foundTag) {
        tag.value = {
          ...foundTag,
          color: foundTag.color || tagColors[foundTag.name] || '#409EFF',
        }

        // 加载相关标签（除当前标签外的其他标签）
        relatedTags.value = (response || [])
          .filter(t => t.id !== tagId && t.count > 0)
          .sort((a, b) => b.count - a.count)
          .slice(0, 8)
          .map(t => ({
            ...t,
            color: t.color || tagColors[t.name] || '#409EFF',
          }))
      } else {
        console.warn('❌ 未找到匹配的标签')
        notFound.value = true
      }
    } catch (error) {
      console.error('💥 加载标签数据失败:', error)
      notFound.value = true
    }
  }

  // 加载标签下的文章
  const loadTagBlogs = async () => {
    if (!tag.value) return

    try {
      blogsLoading.value = true

      const params: BlogPageParam = {
        tags: [tag.value.id],
        keyword: searchKeyword.value || undefined,
        sort: sortType.value,
        pageNum: pagination.value.current,
        pageSize: pagination.value.pageSize,
      }

      const response = await getBlogPage(params)
      blogs.value = response?.records || []
      pagination.value.total = response?.total || 0
    } catch (error) {
      console.error('加载标签文章失败:', error)
    } finally {
      blogsLoading.value = false
    }
  }

  // 处理文章点击
  const handleBlogClick = (blog: Blog) => {
    router.push(`/articles/${blog.id}`)
  }

  // 处理相关标签点击
  const handleRelatedTagClick = (relatedTag: Tag) => {
    router.push(`/tags/${relatedTag.id}`)
  }

  // 返回标签列表
  const goBack = () => {
    router.push('/tags')
  }

  // 搜索文章
  const handleSearch = () => {
    pagination.value.current = 1
    loadTagBlogs()
  }

  // 延迟搜索（防抖）
  const handleSearchInput = () => {
    if (searchTimer.value) {
      clearTimeout(searchTimer.value)
    }

    searchTimer.value = setTimeout(() => {
      handleSearch()
    }, 500) // 500ms 延迟
  }

  // 清空搜索
  const clearSearch = () => {
    searchKeyword.value = ''
    if (searchTimer.value) {
      clearTimeout(searchTimer.value)
    }
    handleSearch()
  }

  // 分页改变
  const handlePageChange = (page: number) => {
    pagination.value.current = page
    loadTagBlogs()
    // 滚动到顶部
    window.scrollTo({ top: 0, behavior: 'smooth' })
  }

  // 格式化日期
  const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: 'long',
      day: 'numeric',
    })
  }

  // 格式化数字
  const formatNumber = (num: number) => {
    if (num >= 1000) {
      return (num / 1000).toFixed(1) + 'k'
    }
    return num.toString()
  }

  // 初始化页面数据
  const initPageData = async () => {
    loading.value = true

    // 重置状态
    tag.value = null
    blogs.value = []
    relatedTags.value = []
    notFound.value = false
    searchKeyword.value = ''
    sortType.value = -1
    showSortDropdown.value = false
    pagination.value = {
      current: 1,
      pageSize: 12,
      total: 0,
    }

    // 清理定时器
    if (searchTimer.value) {
      clearTimeout(searchTimer.value)
      searchTimer.value = null
    }

    try {
      await loadTagData()
      if (tag.value) {
        await loadTagBlogs()
      }
    } finally {
      loading.value = false
    }
  }

  // 监听路由变化
  watch(
    () => route.params.id,
    (newId, oldId) => {
      if (newId && newId !== oldId) {
        console.log('🔄 路由变化，重新加载数据:', { from: oldId, to: newId })
        initPageData()
      }
    },
    { immediate: false }
  )

  onMounted(async () => {
    document.addEventListener('click', handleClickOutside)
    await initPageData()
  })

  onUnmounted(() => {
    document.removeEventListener('click', handleClickOutside)
    if (searchTimer.value) {
      clearTimeout(searchTimer.value)
    }
  })
</script>

<template>
  <div class="tag-detail-page">
    <div class="container">
      <!-- 加载状态 -->
      <div v-if="loading" class="loading-container">
        <div class="loading-spinner"></div>
        <p>正在加载标签信息...</p>
      </div>

      <!-- 未找到状态 -->
      <div v-else-if="notFound" class="not-found-container">
        <div class="not-found-content">
          <div class="not-found-icon">🔍</div>
          <h2>标签未找到</h2>
          <p>抱歉，您访问的标签不存在或已被删除</p>
          <button class="back-btn" @click="goBack">← 返回标签列表</button>
        </div>
      </div>

      <!-- 标签详情内容 -->
      <div v-else-if="tag" class="tag-detail-content">
        <!-- 面包屑导航 -->
        <div class="breadcrumb">
          <span class="breadcrumb-item" @click="goBack">标签</span>
          <span class="breadcrumb-separator">></span>
          <span class="breadcrumb-current">{{ tag.name }}</span>
        </div>

        <!-- 标签头部信息 -->
        <div class="tag-header">
          <div class="tag-info">
            <div class="tag-title">
              <span class="tag-icon" :style="{ color: tag.color }">
                {{ getTagIcon(tag) }}
              </span>
              <h1 class="tag-name">{{ tag.name }}</h1>
              <div class="tag-badge" :style="{ '--tag-color': tag.color }">
                <span v-if="searchKeyword">{{ pagination.total }}篇搜索结果</span>
                <span v-else>{{ tag.count }}篇文章</span>
              </div>
            </div>
            <!-- 标签暂无描述字段 -->
          </div>

          <!-- 统计信息 -->
          <div v-if="stats" class="tag-stats">
            <div class="stat-item">
              <div class="stat-number">{{ stats.totalArticles }}</div>
              <div class="stat-label">
                <span v-if="searchKeyword">搜索结果</span>
                <span v-else>文章数</span>
              </div>
            </div>
            <div class="stat-item">
              <div class="stat-number">{{ formatNumber(stats.totalViews) }}</div>
              <div class="stat-label">总阅读</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">{{ formatNumber(stats.totalLikes) }}</div>
              <div class="stat-label">总点赞</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">{{ stats.avgViews }}</div>
              <div class="stat-label">平均阅读</div>
            </div>
          </div>
        </div>

        <!-- 主要内容区域 -->
        <div class="main-layout">
          <!-- 文章列表区域 -->
          <div class="articles-section">
            <!-- 工具栏 -->
            <div class="articles-toolbar">
              <h2 class="section-title">
                <span v-if="searchKeyword">搜索结果 ({{ pagination.total }}篇)</span>
                <span v-else>相关文章 ({{ pagination.total }}篇)</span>
              </h2>

              <div class="toolbar-controls">
                <!-- 搜索框 -->
                <div class="search-box">
                  <input
                    v-model="searchKeyword"
                    type="text"
                    placeholder="搜索文章..."
                    class="search-input"
                    @input="handleSearchInput"
                    @keyup.enter="handleSearch"
                  />
                  <button v-if="searchKeyword" class="clear-btn" @click="clearSearch">✕</button>
                  <span class="search-icon">🔍</span>
                </div>

                <!-- 排序选择 -->
                <div class="sort-dropdown">
                  <button class="sort-trigger" @click="toggleSortDropdown">
                    <span>{{ getSortText() }}</span>
                    <span class="arrow" :class="{ open: showSortDropdown }">▼</span>
                  </button>
                  <div v-if="showSortDropdown" class="sort-options">
                    <div
                      v-for="option in sortOptions"
                      :key="option.value"
                      class="sort-option"
                      :class="{ active: sortType === option.value }"
                      @click="handleSortSelect(option.value)"
                    >
                      <span class="option-icon">{{ option.icon }}</span>
                      <span>{{ option.label }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 文章列表 -->
            <div class="articles-content">
              <!-- 加载状态 -->
              <div v-if="blogsLoading" class="articles-loading">
                <div v-for="i in 6" :key="i" class="skeleton-article"></div>
              </div>

              <!-- 空状态 -->
              <div v-else-if="blogs.length === 0" class="articles-empty">
                <div class="empty-icon">📝</div>
                <h3>暂无相关文章</h3>
                <p>该标签下还没有文章，或者搜索条件过于严格</p>
                <button v-if="searchKeyword" class="reset-btn" @click="clearSearch">
                  清空搜索条件
                </button>
              </div>

              <!-- 文章网格 -->
              <div v-else class="articles-grid">
                <article
                  v-for="blog in blogs"
                  :key="blog.id"
                  class="article-card"
                  @click="handleBlogClick(blog)"
                >
                  <div class="article-content">
                    <h3 class="article-title">{{ blog.title }}</h3>
                    <p class="article-summary">{{ blog.summary || '暂无摘要' }}</p>

                    <div class="article-meta">
                      <div class="meta-row">
                        <span v-if="blog.category" class="article-category">
                          {{ blog.category.name }}
                        </span>
                        <span class="article-date">{{ formatDate(blog.pushTime) }}</span>
                      </div>
                      <div class="meta-row">
                        <span class="article-stats">👁️ {{ formatNumber(blog.views || 0) }}</span>
                        <span class="article-stats">❤️ {{ formatNumber(blog.likes || 0) }}</span>
                      </div>
                    </div>
                  </div>
                </article>
              </div>

              <!-- 分页控制 -->
              <div v-if="pagination.total > pagination.pageSize" class="pagination">
                <button
                  class="page-btn"
                  :disabled="pagination.current <= 1"
                  @click="handlePageChange(pagination.current - 1)"
                >
                  ← 上一页
                </button>

                <div class="page-numbers">
                  <span class="page-info">
                    第 {{ pagination.current }} 页，共
                    {{ Math.ceil(pagination.total / pagination.pageSize) }} 页
                  </span>
                </div>

                <button
                  class="page-btn"
                  :disabled="
                    pagination.current >= Math.ceil(pagination.total / pagination.pageSize)
                  "
                  @click="handlePageChange(pagination.current + 1)"
                >
                  下一页 →
                </button>
              </div>
            </div>
          </div>

          <!-- 右侧边栏 -->
          <aside class="sidebar">
            <!-- 相关标签 -->
            <div v-if="relatedTags.length > 0" class="sidebar-section">
              <h3 class="sidebar-title">🔗 相关标签</h3>
              <div class="related-tags">
                <div
                  v-for="relatedTag in relatedTags"
                  :key="relatedTag.id"
                  class="related-tag"
                  :style="{ '--tag-color': relatedTag.color }"
                  @click="handleRelatedTagClick(relatedTag)"
                >
                  <span class="tag-icon">{{ getTagIcon(relatedTag) }}</span>
                  <span class="tag-name">{{ relatedTag.name }}</span>
                  <span class="tag-count">({{ relatedTag.count }})</span>
                </div>
              </div>
            </div>
          </aside>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .tag-detail-page {
    min-height: 100vh;
    padding: 2rem 0;
    background: var(--bg-color);
  }

  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
  }

  // 加载状态
  .loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;

    .loading-spinner {
      width: 40px;
      height: 40px;
      border: 4px solid #f3f3f3;
      border-top: 4px solid var(--primary-color);
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-bottom: 1rem;
    }

    p {
      color: var(--text-secondary);
      font-size: 1rem;
    }
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  // 未找到状态
  .not-found-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: 2rem;
  }

  .not-found-content {
    text-align: center;
    max-width: 400px;

    .not-found-icon {
      font-size: 4rem;
      margin-bottom: 1rem;
    }

    h2 {
      color: var(--text-primary);
      margin-bottom: 1rem;
      font-size: 1.5rem;
    }

    p {
      color: var(--text-secondary);
      margin-bottom: 2rem;
      line-height: 1.6;
    }

    .back-btn {
      background: linear-gradient(135deg, var(--primary-color), var(--primary-color-dark));
      color: white;
      border: none;
      padding: 0.75rem 1.5rem;
      border-radius: var(--radius-lg);
      cursor: pointer;
      font-size: 1rem;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }
    }
  }

  // 面包屑导航
  .breadcrumb {
    margin-bottom: 2rem;
    font-size: 0.875rem;
    color: var(--text-secondary);

    .breadcrumb-item {
      cursor: pointer;
      transition: color 0.3s ease;

      &:hover {
        color: var(--primary-color);
        text-decoration: underline;
      }
    }

    .breadcrumb-separator {
      margin: 0 0.5rem;
      opacity: 0.6;
    }

    .breadcrumb-current {
      font-weight: 600;
      color: var(--text-primary);
    }
  }

  // 标签头部
  .tag-header {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 2rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
  }

  .tag-info {
    flex: 1;
    min-width: 300px;
  }

  .tag-title {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.75rem;

    .tag-icon {
      font-size: 2rem;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    }

    .tag-name {
      font-size: 2rem;
      font-weight: 700;
      color: var(--text-primary);
      margin: 0;
    }

    .tag-badge {
      background: var(--tag-color, var(--primary-color));
      color: white;
      padding: 0.5rem 1rem;
      border-radius: var(--radius-lg);
      font-size: 0.875rem;
      font-weight: 600;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
  }

  .tag-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 1.5rem;
    min-width: 400px;

    .stat-item {
      text-align: center;
      padding: 1rem;
      background: rgba(255, 255, 255, 0.5);
      border-radius: var(--radius-lg);
      border: 1px solid var(--border-color);

      .stat-number {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--primary-color);
        margin-bottom: 0.25rem;
      }

      .stat-label {
        font-size: 0.875rem;
        color: var(--text-secondary);
        font-weight: 500;
      }
    }
  }

  // 主布局
  .main-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
    align-items: start;
  }

  // 文章区域
  .articles-section {
    min-width: 0; // 防止 grid 溢出
  }

  .articles-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;

    .section-title {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--text-primary);
      margin: 0;
    }
  }

  .toolbar-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  // 搜索框
  .search-box {
    position: relative;

    .search-input {
      padding: 0.75rem 3rem 0.75rem 2.5rem;
      border: 2px solid var(--border-color);
      border-radius: var(--radius-lg);
      width: 250px;
      font-size: 0.875rem;
      transition: all 0.3s ease;
      background: var(--bg-color);

      &:focus {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.1);
      }

      &::placeholder {
        color: var(--text-secondary);
      }
    }

    .search-icon {
      position: absolute;
      left: 0.75rem;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-secondary);
      font-size: 1rem;
    }

    .clear-btn {
      position: absolute;
      right: 0.75rem;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      color: var(--text-secondary);
      cursor: pointer;
      font-size: 1rem;
      padding: 0.25rem;
      border-radius: 50%;
      transition: all 0.3s ease;

      &:hover {
        background: var(--bg-color-hover);
        color: var(--text-primary);
      }
    }
  }

  // 排序下拉
  .sort-dropdown {
    position: relative;

    .sort-trigger {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      background: var(--bg-color);
      border: 2px solid var(--border-color);
      border-radius: var(--radius-lg);
      padding: 0.75rem 1rem;
      cursor: pointer;
      font-size: 0.875rem;
      color: var(--text-primary);
      transition: all 0.3s ease;

      &:hover {
        border-color: var(--primary-color);
      }

      .arrow {
        font-size: 0.75rem;
        transition: transform 0.3s ease;

        &.open {
          transform: rotate(180deg);
        }
      }
    }

    .sort-options {
      position: absolute;
      top: calc(100% + 0.5rem);
      right: 0;
      background: var(--bg-color);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-lg);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      z-index: 100;
      min-width: 180px;
      overflow: hidden;

      .sort-option {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        cursor: pointer;
        font-size: 0.875rem;
        color: var(--text-primary);
        transition: background-color 0.3s ease;
        border-bottom: 1px solid var(--border-color);

        &:last-child {
          border-bottom: none;
        }

        &:hover {
          background: var(--bg-color-hover);
        }

        &.active {
          background: var(--primary-color);
          color: white;
        }

        .option-icon {
          font-size: 1rem;
        }
      }
    }
  }

  // 文章内容
  .articles-content {
    margin-top: 1rem;
  }

  // 加载状态
  .articles-loading {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;

    .skeleton-article {
      height: 200px;
      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
      background-size: 200% 100%;
      animation: loading 1.5s infinite;
      border-radius: var(--radius-lg);
    }
  }

  @keyframes loading {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }

  // 空状态
  .articles-empty {
    text-align: center;
    padding: 4rem 2rem;

    .empty-icon {
      font-size: 4rem;
      margin-bottom: 1rem;
      opacity: 0.6;
    }

    h3 {
      color: var(--text-primary);
      margin-bottom: 0.5rem;
      font-size: 1.25rem;
    }

    p {
      color: var(--text-secondary);
      margin-bottom: 2rem;
      line-height: 1.6;
    }

    .reset-btn {
      background: var(--primary-color);
      color: white;
      border: none;
      padding: 0.75rem 1.5rem;
      border-radius: var(--radius-lg);
      cursor: pointer;
      font-size: 0.875rem;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }
    }
  }

  // 文章网格
  .articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
  }

  .article-card {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      border-color: var(--primary-color);
    }
  }

  .article-content {
    padding: 1.5rem;

    .article-title {
      font-size: 1.125rem;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 0.75rem;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .article-summary {
      color: var(--text-secondary);
      font-size: 0.875rem;
      line-height: 1.6;
      margin-bottom: 1rem;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
  }

  .article-meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    .meta-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 0.75rem;

      .article-category {
        background: var(--primary-color);
        color: white;
        padding: 0.25rem 0.5rem;
        border-radius: var(--radius-sm);
        font-weight: 500;
      }

      .article-date {
        color: var(--text-secondary);
      }

      .article-stats {
        color: var(--text-secondary);
        display: flex;
        align-items: center;
        gap: 0.25rem;
      }
    }
  }

  // 分页
  .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3rem;
    gap: 1rem;

    .page-btn {
      background: var(--primary-color);
      color: white;
      border: none;
      padding: 0.75rem 1.5rem;
      border-radius: var(--radius-lg);
      cursor: pointer;
      font-size: 0.875rem;
      transition: all 0.3s ease;

      &:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }

      &:disabled {
        background: var(--border-color);
        color: var(--text-secondary);
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
      }
    }

    .page-numbers {
      .page-info {
        color: var(--text-secondary);
        font-size: 0.875rem;
      }
    }
  }

  // 侧边栏
  .sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .sidebar-section {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 1.5rem;

    .sidebar-title {
      font-size: 1.125rem;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 1rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
  }

  // 相关标签
  .related-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;

    .related-tag {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      background: var(--tag-color, var(--primary-color));
      color: white;
      padding: 0.5rem 0.75rem;
      border-radius: var(--radius-lg);
      cursor: pointer;
      font-size: 0.875rem;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }

      .tag-icon {
        font-size: 1rem;
      }

      .tag-name {
        font-weight: 500;
      }

      .tag-count {
        opacity: 0.8;
        font-size: 0.75rem;
      }
    }
  }

  // 响应式设计
  @media (max-width: 768px) {
    .main-layout {
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }

    .tag-header {
      flex-direction: column;
      align-items: flex-start;
      text-align: center;

      .tag-stats {
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
      }
    }

    .articles-toolbar {
      flex-direction: column;
      align-items: stretch;

      .toolbar-controls {
        justify-content: space-between;
      }
    }

    .search-box .search-input {
      width: 100%;
    }

    .articles-grid {
      grid-template-columns: 1fr;
    }

    .pagination {
      flex-direction: column;
      gap: 0.75rem;

      .page-btn {
        width: 100%;
      }
    }
  }

  @media (max-width: 480px) {
    .container {
      padding: 0 0.5rem;
    }

    .tag-detail-page {
      padding: 1rem 0;
    }

    .tag-header {
      padding: 1.5rem;

      .tag-title .tag-name {
        font-size: 1.5rem;
      }

      .tag-stats {
        grid-template-columns: 1fr;
      }
    }

    .articles-toolbar .toolbar-controls {
      flex-direction: column;
      gap: 0.75rem;
    }
  }
</style>
